<template>
  <div class style="width: 100%;height:100%;">
    <div id="container1" style="height: 100%"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import reslist from "../json/position.js";
import chartmixins from '../chartmixins.js'

export default {
  mixins: [chartmixins],
  name: "leftthree",
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  mounted() {
    var dom = document.getElementById("container1");
    var myChart = echarts.init(dom, "dark");
    var app = {};
    let option = null;
    option = {
      ...this.options,
      color: [
        "#002699",
        "#00992677",
        "#99002677",
        "#144FFF77",
        "#99007377",
        "#D6A10077",
        "#73990077"
      ],
      title: {
        text: "消防水池达标率",
        // subtext: "纯属虚构",
        x: "center"
      },
      xAxis: {
        type: "category",
        data: []
      },
      yAxis: {
        type: "value"
      },
      // legend: {
      //   x: "center",
      //   y: "bottom",
      //   data: ["温度", "湿度", "门禁", "空调", "snmp", "水浸"]
      // },
      toolbox: {
        show: true,
        feature: {
          mark: {
            show: true
          }
        }
      },
      calculable: true,
      series: [
        {
          type: "bar",
          data: []
        }
      ]
    };
    reslist.map(item => {
      item.suidao.map(tunnelitem => {
        option.series[0].data.push(_.floor(Math.random() * 100, 2));
        option.xAxis.data.push(tunnelitem.name);
        // option.legend.data.push(tunnelitem.name)
      });
    });
    myChart.setOption(option, true);

    this.myChart = myChart

    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  methods: {}
};
</script>
<style lang='scss' scoped>
</style>